<style>
    .form-commonsearch .form-group {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    form.form-commonsearch .control-label {
        padding-right: 0;
    }

    .tdtitle {
        margin-bottom: 5px;
        font-weight: 600;
    }

    #channeltree {
        margin-left: -6px;
    }

    #channelbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size: 14px;
    }

    @media (max-width: 1230px) {
        .fixed-table-toolbar .search .form-control {
            display: none;
        }
    }

    @media (min-width: 1200px) {

        #channelbar {
            width: 25%;
        }

        #archivespanel {
            width: 75%;
        }
    }

    .archives-label span.label {
        font-weight: normal;
    }

    .archives-title {
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jstree-default .jstree-icon:empty {
        width: 16px;
        height: 20px;
        line-height: 20px;
    }

    .jstree-default .jstree-checkbox {
        background-position: -168px -4px;
    }

    .jstree-default .jstree-themeicon {
        background-position: -265px -4px;
    }

    .jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,
    .jstree-default .jstree-checked>.jstree-checkbox {
        background-position: -233px -4px;
    }

    .jstree-default .jstree-anchor>.jstree-undetermined {
        background-position: -200px -4px;
    }

    .jstree-default .jstree-checkbox:hover {
        background-position: -168px -36px;
    }

    .jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,
    .jstree-default .jstree-checked>.jstree-checkbox:hover {
        background-position: -233px -36px;
    }

    .jstree-default .jstree-anchor>.jstree-undetermined:hover {
        background-position: -200px -36px;
    }
</style>

<div class="row">
    <div class="col-md-4 hidden-xs hidden-sm" id="channelbar" style="padding-right:0;">
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                <div class="panel-lead">
                    <em>{:__('Organizational')}</em>
                </div>
            </div>
            <div class="panel-body" style="padding: 5px">
                <span class="text-muted"><input type="checkbox" name="" id="checkall" /> <label
                        for="checkall"><small>{:__('Check all')}</small></label></span>
                <span class="text-muted"><input type="checkbox" name="" id="expandall" checked="" /> <label
                        for="expandall"><small>{:__('Expand all')}</small></label></span>
                <div id="departmenttree">
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-8" id="archivespanel">
        <div class="panel panel-default panel-intro">

            <div class="panel-heading ">
                {:build_heading(null,FALSE)}
                <!-- <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value=""
                    data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}"
                    data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul> -->
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="toolbar" class="toolbar">
                                {:build_toolbar('refresh,delete')}
                                <!-- {:build_toolbar('refresh,add,edit,del,import')} -->
                                <a class="btn btn-info btn-dialog" href="{:url('import')}" title="导入党员"
                                    data-max-width="60%" data-max-height="60%">
                                    <i class="fa fa-download"></i> 导入党员
                                </a>
                                <a class="btn btn-info btn-selected" href="{:url('downloadTemplate')}"><i
                                        class="fa fa-download"></i>下载导入模板</a>
                                <!-- <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i
                                class="fa fa-leaf"></i> 获取选中项</a>
                        <a class="btn btn-success btn-toggle-view" href="javascript:;"><i class="fa fa-leaf"></i>
                            切换视图</a> -->
                            </div>
                            <table id="table" class="table table-striped table-hover" width="100%">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<style type="text/css">
    .example {
        height: 100%;
        position: relative;
    }

    .example>span {
        position: absolute;
        left: 15px;
        top: 15px;
    }
</style>

<script id="itemtpl" type="text/html">
    <!--
    如果启用了templateView,默认调用的是itemtpl这个模板，可以通过设置templateFormatter来修改
    在当前模板中可以使用三个变量(item:行数据,i:当前第几行,data:所有的行数据)
    此模板引擎使用的是art-template的native,可参考官方文档
    -->
<div class="col-sm-4 col-md-3">
    <!--下面四行是为了展示随机图片和标签，可移除-->
    <% var labelarr=['primary', 'success' , 'info' , 'danger' , 'warning' ]; %>
        <% var label=labelarr[item.id % 5]; %>
            <div class="thumbnail example">
                <span class="btn btn-<%=label%>">ID:<%=item.id%></span>

                <% if (item.image!=null ) { %>
                    <div
                        style="width:150px; height: 200px; display: flex; justify-content: center; align-items: center; margin: auto;margin-top: 20px;">
                        <img src="{$url}/<%= item.image %>" style="width:150px; margin-top: 20px;"
                            alt="<%= item.user.name %>">
                    </div>

                    <% } else { %>

                        <div
                            style="width:150px; height: 200px; display: flex; justify-content: center; align-items: center; margin: auto;margin-top: 20px;">
                            <img src="{$url}/{$party_member}" style="width:150px;margin-top: 20px;" alt="默认照片">
                            <div
                                style="position: absolute; color: #ffffff; font-size: 16px; background-color: #6c6c6c82; padding: 10px;border-radius: 5px;">
                                照片</div>
                        </div>

                        <% } %>
                            <div class="caption">
                                <h4>
                                    <%=item.user.name?item.user.name:'无'%>
                                </h4>
                                <p class="text-muted">党员编号:<%=item.number%>
                                </p>
                                <p class="text-muted">党支部:
                                    <!-- <%=Moment(item.create_time*1000).format("YYYY-MM-DD HH:mm:ss")%> -->
                                    <%=item.department.name%>
                                </p>
                                <!-- <p>
                                    <a href="user/dyfz/studies/Log/index?user_id=<%=item.user_id%>"
                                        class="btn btn-primary btn-info btn-dialog" data-user_id="<%=item.user_id%>"
                                        title="<%=item.user.name?item.user.name:'无'%>" data-max-width="60%"
                                        data-max-height="60%">学业成绩</a>
                                    <a href="user/dyfz/awards/info/index?user_id=<%=item.user_id%>"
                                        class="btn btn-primary btn-info btn-dialog" data-id="<%=item.id%>"
                                        title="<%=item.user.name?item.user.name:'无'%>" data-max-width="60%"
                                        data-max-height="60%"> 在校荣誉</a>
                                    <a href="user/dyfz/awards/Society/index?user_id=<%=item.user_id%>"
                                        class="btn btn-primary btn-info btn-dialog" data-id="<%=item.id%>"
                                        title="<%=item.user.name?item.user.name:'无'%>" data-max-width="60%"
                                        data-max-height="60%">社会荣誉</a>

                                <p>
                                <p>
                                    <a href="user/dyfz/qita/Log/index?user_id=<%=item.user_id%>"
                                        class="btn btn-primary btn-warning btn-dialog" data-id="<%=item.id%>"
                                        title="<%=item.user.name?item.user.name:'无'%>" data-max-width="60%"
                                        data-max-height="60%"></i> 其他荣誉和处分</a>
                                <p> -->
                                <!--详情的事件需要在JS中手动绑定-->
                                <a href="user/party/Member/detail?id=<%=item.id%>"
                                    class="btn btn-primary btn-success btn-dialog" data-id="<%=item.id%>"
                                    title="<%=item.user.name?item.user.name:'无'%>" data-max-width="60%"
                                    data-max-height="60%"><i class="fa fa-table"></i> 详情</a>
                                <!--如果需要响应编辑或删除事件，可以给元素添加 btn-edit或btn-del的类和data-id这个属性值-->
                                <!-- <a href="#" class="btn btn-primary btn-edit" data-id="<%=item.id%>"><i
                                                                                class="fa fa-pencil"></i>
                                                                            编辑</a> -->
                                <a href="#" class="btn btn-danger btn-del" data-id="<%=item.id%>"><i
                                        class="fa fa-times"></i>
                                    删除</a>
                                <span class="pull-right" style="margin-top:10px;">
                                    <!--如果需要多选操作，请确保有下面的checkbox元素存在,可移除-->
                                    <input name="checkbox" data-id="<%=item.id%>" type="checkbox" />
                                </span>
                                </p>
                            </div>
            </div>
</div>
</script>

<script id="departmenttpl" type="text/html">
    <div class="">
        <div class="alert alert-warning-light ui-sortable-handle" style="cursor: move;">
            <b>{:__('Warning')}</b><br>
            {:__('Move tips')}
        </div>
        <!-- /.box-body -->
        <div class="text-black">
            <div class="row">
                <div class="col-sm-12">
                    <select name="channel" class="form-control">
                        <option value="0">{:__('Please select channel')}</option>
                        {$departmentOptions}
                    </select>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>
</script>